<template>
  <div>
    <el-form ref="form" :model="document" label-width="80px">
      <el-form-item label="文档标题">
        <el-input v-model="document.title"></el-input>
      </el-form-item>
      <el-form-item label="文档描述">
        <el-input
          type="textarea"
          v-model="document.remake"
          style="width: 600px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div style="width: 600px; margin-left: 40px">
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :on-preview="handlePreview"
        :on-change="handleChangeFile"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :on-exceed="handleExceedFileLimit"
        :limit="1"
        :show-file-list="true"
      >
        <el-button slot="trigger" size="normal" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="normal"
          type="success"
          @click="submitUpload"
        >
          上传文件
        </el-button>
        <div slot="tip" class="el-upload__tip">上传文件的大小不超过5Mb</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  name: "AddFile",
  data() {
    return {
      document: {
        title: "",
        remake: "",
      },
      fileList: [],
    };
  },
  methods: {
    submitUpload() {
      if (this.document.title != "") {
        if (this.fileList.length > 0) {
          let formData = new FormData();
          formData.append("file", this.fileList[0].raw);
          formData.append("title", this.document.title);
          formData.append("remake", this.document.remake);
          this.$request.post("/document/upload", formData).then((res) => {
            if ((res.data.obj = true)) {
              this.$message.success("上传成功");
              this.fileList = [];
              this.document.title = "";
              this.document.remake = "";
            } else {
              this.$message.warning("上传失败");
            }
          });
        } else {
          this.$message.info("请添加文件");
        }
      } else {
        this.$message.info("请输入文档标题");
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    /**
     * 文件超出个数限制
     */
    handleExceedFileLimit() {
      this.$message.warning("只能上传一个文件");
    },

    /**
     * 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     * @param file 当前文件
     * @param fileList 文件列表
     */
    handleChangeFile(file, fileList) {
      //将文件信息存入对应的fileList
      console.log("file", file);
      this.fileList.push(file);
      console.log("文件列表", this.fileList);
    },

    /**
     * 文件列表移除文件时的钩子
     * @param file 移除的图片
     * @param fileList 图片列表
     */
    handleRemoveFile(file, fileList) {
      //文件移除
      this.fileList = [];
      console.log("文件列表", this.fileList);
    },

    /**
     * 删除文件之前的钩子，参数为上传的文件和文件列表，
     * 若返回 false 或者返回 Promise 且被 reject，则停止删除。
     * @param file 移除的图片
     * @param fileList 图片列表
     */
    beforeRemoveFile(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 400px;
}
</style>
